{% extends "services_base.html" %}
{% block head_content %}{% endblock head_content %}

{% block page_content %}
<div class="nav-stage-main">
    <div class="nav-list">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active">
                <a href="#tab_1" data-toggle="tab" aria-expanded="true">概览</a>
            </li>
            <li role="presentation" class="">
                <a href="#tab_2" data-toggle="tab" aria-expanded="false">实例</a>
            </li>
            <li role="presentation" class="">
                <a href="#tab_3" data-toggle="tab" aria-expanded="false">服务</a>
            </li>
        </ul>
    </div>
    <div>
        <button id="index_add_host" class="btn btn-primary" style="margin-left: 20px; margin-top: 10px;">新加主机</button>
    </div>
</div>


<div class="tab-content">
    <div class="tag-content">
        <button id="preview" class="btn btn-inverse">预览配置</button>
        <button id="run_history" class="btn btn-inverse">运行历史</button>
        <button id="tab_1-refresh" class="btn btn-default ng-binding" ><span class="glyphicon glyphicon-refresh"></span> 刷新</button>
    </div>
    <div id="tab_1" class="tab-pane active">
        <div class="">
            <table class="table table-bordered">
                <tr>
                    <th>servername</th>
                    <th>ip</th>
                    <th>services</th>
                    <th></th>
                </tr>
                {% for host in content %}
                <tr class="info">
                    <td><a href="/preview/?id={{host.host_name}}"><i class="fa fa-eye" aria-hidden="true"></i></a>&nbsp;&nbsp;{{ host.host_name }}</td>
                    <td>{{ host.ip }}</td>
                    <td>
                        {% for ser in host.service_name %}
                            {{ ser }}&nbsp;
                        {% endfor %}
                    </td>
                    <td>
                        <a href="/update_host/?id={{ host.host_name}}">update</a>
                    </td>
                </tr>
                {% endfor %}
            </table> 
        </div>
    </div>

    <div id="tab_2" class="tab-pane ">
        <div class="">
            <table class="table table-bordered">
                <tr>
                    <th>servername</th>
                    <th>cloud</th>
                    <th>services</th>
                </tr>
                <tr class="info">
                    <td>srv-fake-web1</td>
                    <td>aws-china</td>
                    <td>nginx mysql</td>
                </tr>

                <tr class="info">
                    <td>srv-fake-web2</td>
                    <td>aws-china</td>
                    <td>nginx mysql</td>
                </tr>
            </table> 
        </div>
    </div>

    <div id="tab_3" class="tab-pane">
        <!-- <div class="pull-right">
            <button id="update_config" class="btn btn-primary">更新配置</button>
        </div> -->
        {% for service_name, service_value in services.items %}
        <div class="service-entry">
            <div class="col-md-12 no-padding">
                <text>{{ service_name }}</text>
                <div class="fa fa-angle-down tab-line-icon" style="float:right" id="{{service_name}}"></div>
            </div>
        </div>
        <div class="service-content" id="{{service_name}}_content">
            <table class="table table-bordered">
                <tr>
                    <th class="col-md-3 no-padding">servername</th>
                    <th class="col-md-9 no-padding" >parameters</th>
                </tr>
                <!-- key2: host-name, value2: parameters -->
                {% for key2,value2 in service_value.items %}
                <tr class="info">
                    <td class="col-md-3 no-padding">{{ key2 }}</td>
                    <td class="col-md-9 no-padding">
                        <!-- key3: parameter.key, value3: parameter.value -->
                        {% if value2.items %}
                            {% for key3,value3 in value2.items %}
                            <div class="col-md-6 col-sm-6 col-xs-6 no-padding">{{ key3 }}:</div>
                            <div class="col-md-6 col-sm-6 col-xs-6 no-padding">
                                <input class="inputField" name="{{ key2 }}.{{ service_name }}.{{ key3 }}" type=text value="{{ value3 }}"></br>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="col-md-6 col-sm-6 col-xs-6 no-padding">该服务不存在默认参数的定义</div>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </table> 
        </div>
        {% endfor %}
    </div>

</div>
{% endblock page_content %}